﻿@{
    ViewData["Title"] = "角色列表";
}
<div class="layui-layout layui-layout-admin">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间范围</label>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">
                        -
                    </div>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="btnsearch">
                            <i class="layui-icon layui-icon-search"></i> 查询
                        </button>
                    </div>
                </div>
            </form>

            <table id="lsttable" lay-filter="lsttable"></table>
            <script type="text/html" id="toolbar">
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="clear">
                    <i class="layui-icon layui-icon-delete"></i> 清空
                </button>
            </script>
            <script type="text/html" id="bar">
                 <a class="layui-btn layui-btn-xs layui-btn-primary layui-border" lay-event="view">
                  查看详情...
                </a>
            </script>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        var app = {};
        layui.use(['tools', 'toast', 'http'], function () {
            var table = layui.table,
                $ = layui.$,
                laydate = layui.laydate,
                form = layui.form,
                http = layui.http,
                toast = layui.toast,
                tools = layui.tools;

            //
            laydate.render({ elem: '#startTime' });
            laydate.render({ elem: '#endTime' });
            //
            form.on('submit(btnsearch)', function (data) {
                console.log(data.field)
                table.reload('lsttable', {
                    where: data.field
                })
                return false;
            });
            //
            let cols =
                [[
                    { title: 'Id', field: 'id', width: 160 },
                    { title: '时间', field: 'logDateTime', width: 160 },
                    { title: '模块名称', field: 'controllerName', width: 120 },
                    { title: '操作', field: 'displayTitle', width: 180 },
                    { title: '方法名称', field: 'actionName', width: 120 },
                    { title: 'Api', field: 'requestUrl', width: 360 },
                    { title: '耗时', field: 'elapsed', width: 160 },
                    { title: '操作帐号', field: 'account', width: 160 },
                    { title: '姓名', field: 'realName', width: 120 },
                    { title: 'IP', field: 'remoteIp', width: 160 },
                    { title: '浏览器', field: 'browser', width: 160 },
                    { title: '操作系统', field: 'os', width: 160 },
                    { title: '状态', field: 'logLevel', width: 60 },
                    { fixed: 'right', title: '操作', toolbar: '#bar', align: 'right', width: 100 }
                ]];
            //
            tools.PageTable({ url: '/api/sysLogDiff/page', cols });
            table.on('toolbar(lsttable)', function (obj) {            
                switch (obj.event) {
                    case 'clear':
                        app.clear();
                        break;
                };
            });
            table.on('tool(lsttable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'view':
                        app.view(data);
                        break;
                };
            });
            //
            app.view = function (data) {
                data = data || {};               
            }
            app.clear = function (id) {
                var index = layer.confirm('您确定要清空所有日志吗？', function () {
                    http.post('/api/sysLogDiff/clear', { id }).then((res) => {
                        if (res.code == 200) {
                            layer.close(index);
                            table.reload('lsttable');
                            toast.success({ message: '删除成功！' });
                        }
                        else {
                            layer.alert('删除失败，错误信息' + res.message, { icon: 2 });
                        }
                    })
                });
            }
        })
    </script>
}
